<template>
  <div class="tarbar">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="导航设置" name="second" style="padding:0px 28px;height:100%;">
        <div class="mgn line-hei clearfix">
          <span>导航项内容：</span>
          <el-button @click="add()">添加导航</el-button>
        </div>
        <div class="table">
          <table cellpadding="0" cellspacing="0">
            <tr>
              <th>导航文字</th>
              <th>链接</th>
              <th>默认图标</th>
              <th>选中图标</th>
              <th>排序</th>
              <th>操作</th>
            </tr>
            <!-- 綁定v-model給input 和数据绑定在一起，并做键盘抬起事件，当键盘抬起的时候重新上传数据到vuex -->
            <tr v-for="(item,index) in tableData" :key="index">
              <td>
                <input type="text" v-model="item.navigation" @keyup="shuaxin(index)" />
              </td>
              <td contenteditable="true">{{item.link}}</td>
              <!-- 图片修改步骤
              1.点击icon弹出选择图片对话框
              2.选择图片将图片路径传到vuex
              3.监听到对话框关闭，找到点击的这个index，修改他对应数据的值-->
              <td @click="show(index)">
                <div class="imgBoder">
                  <img :src="item.defultIcon" alt style="width:24px;height:24px;" />
                </div>
              </td>
              <td @click="selectshow(index)">
                <div class="imgBoder">
                  <img :src="item.select" alt style="width:24px;height:24px;" />
                </div>
              </td>
              <td>
                <div class="control">
                  <div @click="up(index)" class="controlsub">
                    <img src="../../../assets/config_images/up.png" alt />
                  </div>
                  <div @click="down(index)" class="controlsub">
                    <img src="../../../assets/config_images/down.png" alt />
                  </div>
                </div>
              </td>
              <td>
                <div class="control">
                  <div>
                    <img src="../../../assets/config_images/compile.png" alt />
                  </div>
                  <div @click="delect(index)">
                    <img src="../../../assets/config_images/shan_chu.png" alt />
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </el-tab-pane>
      <!-- 设置组件的样式 -->
      <el-tab-pane label="组件样式" name="first" style="padding:0px 28px;height:100%;">
        <div class="mgn line-hei">
          <span>样式选择：</span>
        </div>
        <div class="barStyle">
          <div
            class="box"
            v-for="(item,index) in boxOneData"
            :key="index"
            :class="{boxBoder:item.border}"
          >
            <div class="one" @click="selected(index)">
              <img :src="item.src" alt style="width:100%" />
            </div>
          </div>
        </div>
        <div class="contstyle">
          <span>内容形式：</span>
          <el-radio-group v-model="radio">
            <el-radio :label="3">图+文字</el-radio>
            <el-radio :label="6">纯文字</el-radio>
            <el-radio :label="9">纯图标</el-radio>
          </el-radio-group>
        </div>
        <div class="colorStyle clearfix">
          <div class="fxid-box">
            <span>文字颜色：</span>
            <el-color-picker
              class="mycolor"
              size="small"
              v-model="color"
              show-alpha
              :predefine="textObj.predefineColors"
            ></el-color-picker>
          </div>
          <div class="fxid-box">
            <span>选中文字颜色：</span>
            <el-color-picker
              class="mycolor"
              size="small"
              v-model="color1"
              show-alpha
              :predefine="textObj.predefineColors"
            ></el-color-picker>
          </div>
        </div>
        <div class="colorStyle clearfix">
          <div class="fxid-box">
            <span>导航背景：</span>
            <el-color-picker
              class="mycolor"
              size="small"
              v-model="color2"
              show-alpha
              :predefine="textObj.predefineColors"
            ></el-color-picker>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <upImage @closeModel="closeModel" :dialogVisible="showImg||selecImg"></upImage>
  </div>
</template>

<script>
import stote from "@/store/index";
import upImage from "@/components/UploadImages/UploadImages";
export default {
  components: {
    upImage
  },
  data() {
    return {
      showImg: false,
      selecImg: false,
      stote,
      activeName: "second",
      radio: 3,
      color: "rgba(53, 64, 64, 1)",
      color1: "rgba(53, 64, 64, 1)",
      color2: "rgba(53, 64, 64, 1)",
      textObj: {
        mainKey: "",
        predefineColors: [
          "#ff4500",
          "#ff8c00",
          "#ffd700",
          "#90ee90",
          "#00ced1",
          "#1e90ff",
          "#c71585",
          "rgba(255, 69, 0, 0.68)",
          "rgb(255, 120, 0)",
          "hsv(51, 100, 98)",
          "hsva(120, 40, 94, 0.5)",
          "hsl(181, 100%, 37%)",
          "hsla(209, 100%, 56%, 0.73)",
          "#c7158577"
        ]
      },
      boxOneData: [
        {
          src: require("../../../assets/config_images/bar3.png"),
          border: true
        },
        {
          src: require("../../../assets/config_images/bar1.png"),
          border: false
        },
        {
          src: require("../../../assets/config_images/bar2.png"),
          border: false
        }
      ],
      tableData: [
        {
          selected: true,
          navigation: "首页",
          link: "我是导航",
          defultIcon: require("../../../assets/config_images/home.png"),
          select: require("../../../assets/config_images/home.png"),
          sort: "我是导航",
          operation: "我是导航"
        },
        {
          selected: false,
          navigation: "生活",
          link: "我是导航",
          defultIcon: require("../../../assets/config_images/shop.png"),
          select: require("../../../assets/config_images/shop.png"),
          sort: "我是导航",
          operation: "我是导航"
        },
        {
          selected: false,
          navigation: "房产",
          link: "我是导航",
          defultIcon: require("../../../assets/config_images/info.png"),
          select: require("../../../assets/config_images/info.png"),
          sort: "我是导航",
          operation: "我是导航"
        }
      ]
    };
  },
  methods: {
    // 选择图片对话框打开
    closeModel() {
      console.log(this.imgspath);
      this.showImg = false;
      this.selecImg = false;
    },
    // 切换图标
    show(index) {
      this.showImg = true;
      stote.commit("tarbar/SET_IDX", index);
    },
    selectshow(index) {
      this.selecImg = true;
      stote.commit("tarbar/SET_IDX", index);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 选择导航样式
    selected(idx) {
      console.log(this.tarbar);
      stote.commit("tarbar/SET_STYLE", idx);
      this.$store.dispatch('apply/PageJSONUpData');
      for (let i = 0; i < this.boxOneData.length; i++) {
        this.boxOneData[i].border = false;
      }
      this.boxOneData[idx].border = true;
    },
    initiaData(val) {
      stote.commit("tarbar/SET_TABAR", val);
      this.$store.dispatch('apply/PageJSONUpData');
    },
    shuaxin(idx) {
      this.initiaData(this.tableData);
    },
    // 变换位置
    up(idx) {
      if (idx > 0 && idx < this.tableData.length) {
        var tempOption = this.tableData[idx - 1];
        this.$set(this.tableData, idx - 1, this.tableData[idx]);
        this.$set(this.tableData, idx, tempOption);
      }
    },
    down(idx) {
      if (idx < this.tableData.length - 1 && idx >= 0) {
        var tempOption = this.tableData[idx + 1];
        this.$set(this.tableData, idx + 1, this.tableData[idx]);
        this.$set(this.tableData, idx, tempOption);
      }
    },
    // 添加导航
    add() {
      var tabdata = {
        selected: false,
        navigation: "点击修改",
        link: "我是导航",
        defultIcon: require("../../../assets/config_images/info.png"),
        select: require("../../../assets/config_images/info.png"),
        sort: "我是导航",
        operation: "我是导航"
      };
      if (this.tableData.length >= 3 && this.tableData.length < 5) {
        this.tableData.push(tabdata);
      } else {
        this.$message.error("底部导航应在3-5个");
      }
    },
    // 删除导航
    delect(idx) {
      if (this.tableData.length > 3 && this.tableData.length <= 5) {
        this.tableData.splice(idx, 1);
      } else {
        this.$message.error("底部导航应在3-5个");
      }
    }
    // 更新底部导航的vuex
  },
  watch: {
    color: function(val) {
      stote.commit("tarbar/SET_WORDCOLOR", val);
      this.$store.dispatch('apply/PageJSONUpData');
    },
    color1: function(val) {
      stote.commit("tarbar/SET_CHECKC0LOR", val);
      this.$store.dispatch('apply/PageJSONUpData');
    },
    color2: function(val) {
      stote.commit("tarbar/SET_BARCOLOR", val);
      this.$store.dispatch('apply/PageJSONUpData');
    },
    radio: function(val) {
      stote.commit("tarbar/SET_RADIO", val);
      this.$store.dispatch('apply/PageJSONUpData');
    },
    tableData: function() {
      this.initiaData(this.tableData);
    },
    // 对话框关闭，路径赋值
    showImg: function() {
      var indx = this.stote.state.tarbar.idx;
      if (this.showImg === false) {
        this.tableData[indx].defultIcon = this.imgsPath;
      }
    },
    selecImg: function() {
      var idx1 = this.stote.state.tarbar.idx;
      if (this.selecImg === false) {
        this.tableData[idx1].select = this.imgsPath;
      }
    }
  },
  computed: {
    imgsPath() {
      return this.stote.state.imgs.imgUrl;
    },
    tarbarDate() {
      return this.stote.state.tarbar.tarbar;
    }
  },
  created() {
    // this.initiaData(this.tableData);
    // this.initialdata();
  },
  mounted() {
    // 记载组件之后加载vuex里面的数据
    this.tableData = this.tarbarDate;
  }
};
</script>

<style lang="scss" scoped>
.clearfix:after {
  display: block;
  content: "";
  clear: both;
}
.tarbar {
  span {
    font-size: 14px;
  }
  .el-tab-pane {
    .line-hei {
      height: 58px;
      line-height: 58px;
      font-size: 14px;
      margin-top: -0px;
      .el-button {
        padding: 7px 16px;
        float: right;
        margin-top: 15px;
      }
    }
    .table {
      text-align: center;
      font-size: 12px;
      border: 1px solid #ebeef5;
      table {
        width: 100%;
      }
      tr {
        width: 100%;
        height: 42px;
        line-height: 42px;
        td {
          border-bottom: 1px solid #ebeef5;
          line-height: 42px;
          width: 16.66%;
          input {
            width: 57px;
            border: 0;
            text-align: center;
          }
          .imgBoder {
            width: 34px;
            height: 34px;
            margin: 0 auto;
            border: 1px dashed rgba(223, 223, 223, 1);
            padding: 4px;
          }
          .control {
            height: 42px;
            width: 100%;
            display: flex;
            justify-content: center;
            div {
              float: left;
              justify-content: center;
              width: 40%;
              height: 42px;
              display: flex;
              flex-wrap: nowrap;
              align-items: center;
              img {
                text-align: center;
              }
            }
            .controlsub {
              width: 20%;
            }
          }
        }
      }
      th {
        font-weight: 400;
        border-bottom: 1px solid #ebeef5;
      }
    }

    .barStyle {
      .box {
        width: 100%;
        padding: 5px;
        border-radius: 1px;
        margin-bottom: 20px;
      }
      .boxBoder {
        border: 1px solid rgba(0, 138, 255, 1);
      }
    }
    .contstyle {
      margin-bottom: 15px;
      .el-radio {
        margin-right: 15px;
      }
    }
    .colorStyle {
      .fxid-box {
        float: left;
        margin-right: 20px;
        display: flex;
        line-height: 20px;
        height: 20px;
      }
      margin-bottom: 15px;
      .el-color-picker {
        height: 18px;
      }
    }
  }
}
</style>

<style lang="scss">
.tarbar {
  .el-tabs__nav-wrap {
    padding-left: 130px;
  }
  .el-color-picker--small .el-color-picker__trigger {
    padding: 0;
    height: 18px;
    width: 40px;
    border-radius: 9px;
    overflow: hidden;
    .el-color-picker__color {
      border: 0;
    }
  }
  .el-tabs__header {
    margin: 0;
  }
}
</style>
